import { createRouter, createWebHistory } from 'vue-router'
import Main from '@/views/Main.vue'
import AdminHome from '@/views/admin/AdminHome.vue'
import AdminCourse from "@/views/admin/AdminCourse.vue";
import AdminCategory from "@/views/admin/AdminCategory.vue";
import AdminTag from "@/views/admin/AdminTag.vue";
import AdminOrder from "@/views/admin/AdminOrder.vue";
import AdminBlogger from "@/views/admin/AdminBlogger.vue";
import AdminUser from "@/views/admin/AdminUser.vue";
import BloggerHome from "@/views/blogger/BloggerHome.vue";
import BloggerCourse from "@/views/blogger/BloggerCourse.vue";
import BloggerOrder from "@/views/blogger/BloggerOrder.vue";
import BloggerUser from "@/views/blogger/BloggerUser.vue";
import Test from "@/views/admin/Test.vue";
import Login from "@/views/web/Login.vue"
import Register from "@/views/web/Register.vue"
import Index from "@/views/web/Index.vue";
import ArticleCourse from "@/views/web/ArticleCourse.vue";
import VideoCourse from "@/views/web/VideoCourse.vue";
import ArticleDetail from "@/views/web/Article.vue";
import VideoDetail from "@/views/web/Video.vue";
import Order from "@/views/web/Order.vue";
import Collect from "@/views/web/Collect.vue";
import Auth from "@/views/web/403.vue";
import NotFound from "@/views/web/404.vue"

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [

    {
      path: '/manage',
      component: Main,
      name: 'manage',
      children: [
        {
          path: 'admin/home',
          meta: { title: '系统首页', id: '1', name: '系统首页', icon: 'House', path: '/manage/admin/home', describe: '用于展示当前系统中的统计数据、统计报表及重要实时数据', roles: ['ADMIN'] },
          component: AdminHome
        },
        {
          path: 'blogger/home',
          meta: { title: '系统首页', id: '1', name: '系统首页', icon: 'House', path: '/manage/blogger/home', describe: '用于展示当前系统中的统计数据、统计报表及重要实时数据', roles: ['BLOGGER'] },
          component: BloggerHome
        },
        {
          path: 'admin/information',
          meta: { title: '信息管理',id: '2', name: '信息管理', icon: 'Grid', roles: ['ADMIN']  },
          children: [
            {
              path: 'course',
              meta: { title: '审核课程',id: '1', name: '审核课程',  path: '/manage/admin/information/course', describe: '管理员可以审核课程' },
              component: AdminCourse
            },
            {
              path: 'category',
              meta: { title: '分类管理',id: '2', name: '分类管理',  path: '/manage/admin/information/category', describe: '管理员可以管理分类' },
              component: AdminCategory
            },
            {
              path: 'tag',
              meta: { title: '标签管理',id: '3', name: '标签管理',  path: '/manage/admin/information/tag', describe: '管理员可以管理标签' },
              component: AdminTag
            },
            {
              path: 'order',
              meta: { title: '订单管理',id: '4', name: '订单管理',  path: '/manage/admin/information/order', describe: '管理员可以管理订单' },
              component: AdminOrder
            }
          ]
        },
        {
          path: 'blogger/information',
          meta: { title: '信息管理',id: '2', name: '信息管理', icon: 'Grid', roles: ['BLOGGER']  },
          children: [
            {
              path: 'course',
              meta: { title: '课程管理',id: '1', name: '课程管理',  path: '/manage/blogger/information/course', describe: '管理员可以审核课程' },
              component: BloggerCourse
            },
            {
              path: 'order',
              meta: { title: '订单管理',id: '2', name: '订单管理',  path: '/manage/blogger/information/order', describe: '管理员可以管理订单' },
              component: BloggerOrder
            }
          ]
        },
        {
          path: 'admin/user',
          meta: { title: '用户管理',id: '3', name: '用户管理', icon: 'User', roles: ['ADMIN'] },
          children: [
            {
              path: 'blogger',
              meta: { title: '博主信息',id: '1', name: '博主信息', icon: '', path: '/manage/admin/user/blogger', describe: '管理所有博主信息' },
              component: AdminBlogger
            },
            {
              path: 'common',
              meta: { title: '用户信息',id: '2', name: '用户信息', icon: '', path: '/manage/admin/user/common', describe: '管理所有用户信息' },
              component: AdminUser
            }
          ]
        },
        {
          path: 'blogger/user',
          meta: { title: '学员管理',id: '3', name: '学员管理', icon: 'User', roles: ['BLOGGER'] },
          children: [
            {
              path: 'common',
              meta: { title: '学员信息',id: '2', name: '学员信息', icon: '', path: '/manage/blogger/user/common', describe: '管理所有用户信息' },
              component: BloggerUser
            }
          ]
        }
      ]
    },

    // 所有用户都可以访问的路径
    {
      path: '/login',
      component: Login,
      name: 'login',
      meta: {title: '登录'}
    },
    {
      path: '/order',
      component: Order,
      name: 'order',
      meta: {title: '我的订单'}
    },
    {
      path: '/collect',
      component: Collect,
      name: 'collect',
      meta: {title: '我的收藏'}
    },
    {
      path: '/register',
      component: Register,
      name: 'register',
      meta: {title: '注册'}
    },
    {
      path: '/article-course',
      component: ArticleCourse,
      name: 'ArticleCourse',
      meta: {title: '图文课程 - 高校互联网技术在线学习平台'}
    },
    {
      path: '/video-course',
      component: VideoCourse,
      name: 'VideoCourse',
      meta: {title: '视频课程 - 高校互联网技术在线学习平台'}
    },
    {
      path: '/article/:id',
      component: ArticleDetail,
      name: 'article',
      meta: {title: '文章课程详情'}
    },
    {
      path: '/video/:id',
      component: VideoDetail,
      name: 'video',
      meta: {title: '视频课程详情'}
    },
    {
      path: '/',
      component: Index,
      name: 'index',
      meta: {title: '高校互联网技术在线学习平台'}
    },

    {
      path: '/test',
      component: Test,
      name: 'test',
    },
    {
      path: '/403',
      component: Auth,
      name: '403',
    },
    {
      path: '/:pathMatch(.*)*', // Vue Router 4.x
      component: NotFound,
      name: '404',
    },

    

  ]
})

// 路由前置守卫解决用户权限问题
// to是到达路由信息, from是来源路由信息, next是跳转路由函数
router.beforeEach((to, from, next) => {
  // 管理员角色才能访问的路径
  let adminPaths = ['/admin/home',
    '/admin/informationManage/course','/admin/informationManage/category',
    '/admin/informationManage/tag','/admin/informationManage/order',
    '/admin/userManage/blogger','/admin/userManage/user']
  let userInfo = JSON.parse(localStorage.getItem("userInfo") || '{}')
  console.log(userInfo)
  // 若当前用户角色不是管理员, 但是想要访问管理员路径, 提示权限不对应
  if(userInfo.role !== 'ADMIN' && adminPaths.includes(to.path)) {
    next('/403')
  }else {
    next()
  }

})

// 路由后置守卫
router.afterEach((to, from) => {
  // 动态设置页面 Title
  let title = (to.meta.title ? to.meta.title : '') + ' - ItLearning'
  document.title = title
})

export default router
